[Day 16] 簡易前端框架 Bootstrap 5 製作評價瀏覽網頁 (中)

2024 iThome 鐵人賽

DAY 16

Software Development

做一支專屬自己學校的課程評價 LINE Bot 吧！系列第 16 篇

16th鐵人賽

MDChain

2024-09-30 22:49:49

42 瀏覽

分享至

在上一篇文章中，我們處理好了後端 (Python) 的處理邏輯，以及網址的定義，本篇文章則是透過評價瀏覽網頁功能，介紹使用者接觸網頁的第一線介面設計，在此我們使用 Bootstrap 5 協助網頁前端的設計。

前端框架 Bootstrap 5

許多初學者會先從 0 開始刻網頁，但因為介面陽春，且無法適應不同螢幕尺寸的設備，反而容易讓初學者少了一些足夠的成就感，如果你剛入門，Bootstrap 5 前端框架會是一個蠻好的工具。尤其是在網格系統與切版相當方便，它提供先設計好的 HTML、CSS 和 JavaScript 元件，方便開發者使用，也能適應不同尺寸的設備 (即響應式)。

本篇會以導讀 course_feedback.html 原始碼為主，介紹需要考量的面向與要點。

先備知識

讀者在服用本篇文章之前，必須至少先了解:

網頁是由 HTML, CSS, JavaScript 所構成
HTML 的對稱式標籤與 head, body, style, class, li, div 等基本架構
CSS 樣式宣告與 class 之間的關係

編寫邏輯

建議在閱讀時可以配著介面與程式碼一同服用。

套件引入

我們先透過 CDN 的方式引入 Bootstrap 的 CSS 與 JavaScript 的套件連結:

引入 bootstrap.min.css 於 <head> 標籤中

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

引入 bootstrap.min.css 於 <body> 標籤的最後一行
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
```
因為 JavaScript 會影響網頁載入的速度，先讓網頁先處理完 HTML、CSS 的渲染，再處理 Js 邏輯部分，能提升使用者體驗。

Body 架構說明

在此頁面中可以分成搜尋框、評價顯示、分頁，三大部分:

搜尋框以 <form> 包覆，作為傳遞值到後端 views.py 進行部分符合的關鍵字搜尋
評價顯示以 <div> 包覆，顯示後端所傳過來的 feedback 內容進行處理
分頁以 <nav>包覆，處理多筆資料的分頁處理

當在觀察一個網頁時，可以試著依照功能將版面進行切分，就能夠更了解每個部份的編寫邏輯。

搜尋框部分

    <form method="GET" action="" class="mb-4">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜尋課名或老師" name="query"
                        value="{{ request.GET.query }}">
                    <button class="btn btn-primary" type="submit">搜尋</button>
                </div>
            </div>
        </div>
    </form>

處理動態資料的渲染 Variable tag :仔細看上文中的 {{ request.GET.query }} 是一種 Django 所特有的 Variable tag，兩個花括號代表的是一個變數，在之後會密集的出現這類型的 tag，目的讓由後端傳值至前端時能動態代入至 HTML。{{ request.GET.query }} 中的 request.GET.query 是能藉由使用者所輸入的搜尋內容，在搜尋完成後，又自動從後端代入關鍵字在輸入框，以便讓使用者記得目前所搜尋的關鍵字為何。
處理元件的寬度: class="mb-4" 中的 mb 代表 margin-bottom，用來設置元素與其下方內容的距離。在 Bootstrap中，mb 後面的數字表示不同程度的邊距大小，範圍通常是 0 到 5。
處理元件在不同螢幕尺寸的大小:col-md-6 和 col-lg-4 是用來控制元素在不同螢幕尺寸下的寬度分佈：col-md-6：表示當視窗寬度達到 768px（即 medium 或 md 尺寸）及以上時，這個元素將佔據等分網頁 12 格中的 6 格，換算成百分比就是佔據 50% 的寬度。col-lg-4：表示當視窗寬度達到 992px（即 large 或 lg 尺寸）及以上時，這個元素將佔據 12 格中的 4 格，換算成百分比就是佔據 33.33% 的寬度。
讓醜醜的 Input/form/button 變美: input-group form-control btn btn-primary 主要是讓網頁變美之用，畢竟這也是 Bootstrap 的使命之一，遇到需要包裝輸入框就把 input-group form-control 用下去~ 而按鈕按下去的樣式變化也能使用 btn 處理，並使用 btn-primary 代入外觀顏色。